<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Your Online Address Book</title>
<link type="text/css" rel="stylesheet" href="css/site.css">
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/md5-min.js"></script>
<script type="text/javascript">

var $editing_row;
function create_callback(data){
	if(data.success=="true")
	{
		$msg = "Create Succeeded!";
		$creating_row="<tr>"+ 
				"<td style=\"display: none;\">"+data.contact.id+"</td>"+
				"<td><img alt=\"\" src=\""+data.contact.gravatarURL+"\"></td>"+
				"<td>"+data.contact.lastname+"</td>"+
				"<td>"+data.contact.firstname+"</td>"+
				"<td>"+data.contact.birthday+"</td>"+
				"<td>"+data.contact.mobilephone+"</td>"+
				"<td>"+data.contact.email+"</td>"+
				"<td><Button name=\"edit\">Edit</Button><Button name=\"delete\">Delete</Button></td>"+
			"</tr>";
		$("tr:last",$("#addresstable")).after($creating_row);
	}
	else
	{
		$msg = "Create Failed!";
	}
	$('#msg').html($msg).fadeIn("slow").delay(3000).fadeOut(1000);
};
function update_callback(data,$editing_row){
	if(data.success=="true")
	{
		$msg = "Update Succeeded!";
	$('td',$editing_row).map(function(index){
		//alert(index+"->"+$(this).html());
		switch(index) {
		case 0:
			$(this).text(data.contact.id);
			break;
		case 1:
			$gavatar_url = data.contact.gravatarURL;
			$('img', $(this)).attr('src',$gavatar_url);
			break;
		case 2:
			$(this).text(data.contact.lastname);
			break;
		case 3:
			$(this).text(data.contact.firstname);
			break;
		case 4:
			$(this).text(data.contact.birthday)
			break;
		case 5:
			$(this).text(data.contact.mobilephone)
			break;
		case 6:
			$(this).text(data.contact.email);
			break;
		default:
			break;
		}
		});
	//important, set #id value to empty, firefox will cache the html page(will make new create always be update)
	$("#id").val("");
	}
	else
	{
		$msg = "Update Failed!";
	}
	$('#msg').html($msg).fadeIn("slow").delay(3000).fadeOut(1000);
};

function delete_callback(data,$tablerow)
{
	if(data.success=="true")
	{
		$msg = "Delete Succeeded!";
		$tablerow.hide();
	}
	else
	{
		$msg = "Delete Failed!";
	}
	$('#msg').html($msg).fadeIn("slow").delay(3000).fadeOut(1000);
}
//for ajax gravatar show
function validate()
{
	$('input[type=text]').change(function () {
	switch (this.id) {
	/* some validation code here */
	case "email":
		$email = $.trim($("#email").val()).toLowerCase();
		$gavatar = hex_md5($email);
		$gavatar_url = "http://www.gravatar.com/avatar/"+$gavatar+"?d=monsterid";
		$("#gravatarURL").val($gavatar_url);
		$("#gravatarIMG").attr("src",$gavatar_url);
		break;
	default:
		//alert(this.id+"="+$(this).val());
		break;
	    }
	});
		
}
$(document).ready(function(){

	validate();
	
	$("#msg").ajaxSuccess(function(evt, request, settings){
	    //$(this).append("<li>Successful Request!</li>");
	    //console.log(evt);
	    });
    
	$("#submit").click(function(){
		$.post('contact', 
				{ 	id: $('#id').val(), 
					gravatarURL: $('#gravatarURL').val(),
					lastname: $('#lastname').val(),
					firstname: $('#firstname').val(),
					birthday: $('#birthday').val(),
					mobilephone: $('#mobilephone').val(),
					email: $('#email').val()
				},function(data){
					if($('#id').val()=="")
					{
						create_callback(data);
					}
					else
					{
						update_callback(data,$editing_row)
					}
				},'json');
	});

	$(":button[name='edit']").live('click',function(event){
		$editing_row = $(this).closest('tr');
		$('td',$(this).closest('tr')).map(function(index){
			//alert(index+"->"+$(this).html());
			switch(index) {
			case 0:
				$("#id").val($(this).text());
				break;
			case 1:
				$gavatar_url = $('img', $(this)).attr('src');
				$("#gravatarURL").val($gavatar_url);
				$("#gravatarIMG").attr("src",$gavatar_url);
				break;
			case 2:
				$('#lastname').val($(this).text());
				break;
			case 3:
				$('#firstname').val($(this).text());
				break;
			case 4:
				$('#birthday').val($(this).text())
				break;
			case 5:
				$('#mobilephone').val($(this).text())
				break;
			case 6:
				$('#email').val($(this).text());
				break;
			default:
				break;
			}
			});
	});
	$(":button[name='delete']").live('click',function(event){
		if(confirm("Are you sure?"))
		{
			$id = $('td',$(this).closest('tr')).first().text();
			$tablerow = $(this).closest('tr');
			$.post('contact', 
					{ 	id: $id, 
						method: 'delete'
					},function(data){delete_callback(data,$tablerow)},'json');
		}
		
	});
});


</script>
</head>
<body>
<h1>Your Online Address Book</h1>

<!-- ************************************************************************************************* -->
<table id="addresstable">
	<thead>
		<tr>
			<th style="display: none;">ID</th><th width="0">Gravatar</th><th>LastName</th><th>FirstName</th><th>Birthday</th><th>Mobile Phone</th><th>Email</th>
			<th>Actions</th>
		</tr>
	</thead>
	<tbody>
		<c:forEach var="contact" items="${contactList}" >
			<tr> 
				<td style="display: none;">${contact.id}</td>
				<td><img alt="" src="${contact.gravatarURL}"></td>
				<td>${contact.lastname}</td>
				<td>${contact.firstname}</td>
				<td><fmt:formatDate value="${contact.birthday}" pattern="yyyy-MM-dd"/></td>
				<td>${contact.mobilephone}</td>
				<td>${contact.email}</td>
				<td><Button name="edit">Edit</Button><Button name="delete">Delete</Button></td>
			</tr>
		</c:forEach>
	</tbody>
</table>

<div align="center" style="width: 70%"><label id="msg"></label></div>

<!-- ************************************************************************************************* -->
<h2>Add/Edit Contact</h2>
<div id="contactForm">
	<input type="hidden" id="id" name="id" value="${contact.id}">
	<input type="hidden" id="gravatarURL" name="gravatarURL" value="${contact.gravatarURL}">
	<table>
		<tbody>
		<tr>
			<td rowspan="5"><img id="gravatarIMG" alt="Gravatar" src="${contact.gravatarURL}"></td>
			<td>Last Name:</td><td><input type="text" id="lastname" name="lastname"></td>
		</tr>
		<tr>
			<td>First Name:</td><td><input type="text" id="firstname" name="firstname"></td>
		</tr>
		<tr>
			<td>Birthday:</td><td><input alt="yyyy-MM-dd" type="text" id="birthday" name="birthday"></td>
		</tr>
		<tr>
			<td>Mobile Phone:</td><td><input type="text" id="mobilephone" name="mobilephone"></td>
		</tr>
		<tr>
			<td>Email:</td><td><input type="text" id="email" name="email"></td>
		</tr>
		<tr>
			<td colspan="3"><Button id="submit" type="submit">Submit</Button></td>
		</tr>
		</tbody>
	</table>

</div>
</body>
</html>